<template>
  <van-form @submit="onSubmit" @failed="onFail" class="form">
    <van-field
      v-model="form.phone"
      name="phone"
      type="tel"
      clearable
      label="手机号码"
      placeholder="请输入手机号码"
      :rules="[
        { required: true, message: '请输入手机号码' },
        { pattern: reg.phone, message: '请输入有效的手机' },
      ]"
      @blur="checkPhone"
    />
    <van-field
      v-model="form.captcha"
      name="captcha"
      type="text"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
      :rules="[
        { required: true, message: '请输入短信验证码' },
        { pattern: reg.code, message: '请输入4位的验证码' },
      ]"
    >
      <template #button>
        <van-button
          v-if="toggle"
          @click="startSend"
          size="small"
          type="primary"
          native-type="button"
          :disabled="!flag"
          >发送验证码</van-button
        >
        <van-button size="small" v-else native-type="button" disabled
          >剩余{{ count }}S</van-button
        >
      </template>
    </van-field>
    <div style="margin: 16px" class="links">
      <p>
        <router-link class="color1" :to="{ name: 'zhuce' }"
          >没有账号,立即注册</router-link
        >
        >
      </p>
      <p>
        <router-link class="color2" :to="{ name: 'forgetpass' }"
          >忘记密码?</router-link
        >
      </p>
    </div>
    <div style="margin: 36px 16px">
      <van-button block type="primary" native-type="submit">登录</van-button>
    </div>
  </van-form>
</template>


<script>
var timer = null;
export default {
  data() {
    return {
      form: {},
      flag: false,
      count: 120,
      toggle: true,
    };
  },
  methods: {
    startSend() {
      this.toggle = false;
      this.count--;
      timer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
          this.toggle = false;
        } else {
          clearInterval(timer);
          timer = null;
          this.toggle = true;
          this.count = 120;
        }
      }, 1000);
      // ajax
      // 发送验证码
      this.$ajax
        .sendCaptcha({
          phone: this.form.phone,
        })
        .then((res) => {
          if ((res.code = 200)) {
            this.$notify({ type: "success", message: "验证码发送成功" });
          } else {
            this.ShowError("发送失败");
          }
        });
    },
    checkPhone() {
      this.flag = this.reg.phone.test(this.form.phone);
    },
    changeType() {
      this.type = this.type == "password" ? "text" : "password";
    },
    onSubmit(value) {
      // 校验 验证码
      // 先判断有没有这个phone 用户
      console.log(value);
      this.$ajax.verifyCaptcha(value).then((res) => {
        if ((res.code = 200)) {
          // this.$notify({ type: "success", message: "验证码发送成功" });
          // 判断这个手机号是否注册
          this.$ajax
            .findUser({
              phone: value.phone,
            })
            .then((res) => {
              if (res.length > 0) {
                this.$notify({ type: "success", message: "校验成功" });
                this.$router.push({ name: "mine" });
                // 用户信息存储 Vuex
                this.changeUserInfo(res[0]);
                localStorage.setItem("userInfo", JSON.stringify(res[0]));
              } else {
                this.ShowError("用户不存在,请先注册");
              }
            });
        } else {
          this.ShowError("校验失败,验证码错误");
        }
      });
    },
    onFail() {
      this.$toast("请输入有效的数据信息");
    },
    destroyed() {
      clearInterval(timer);
      timer = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.form {
  margin-top: 20px;
  .links {
    display: flex;
    justify-content: space-between;
  }
  .color1 {
    color: rgb(247, 2, 2);
  }
  .color2 {
    color: rgb(247, 2, 2);
  }
}
</style>